<template>
    <div style="width:100%;height:100%;" id="visite_volume_con"></div>
</template>

<script>
import echarts from 'echarts';

import util from '@/libs/util';
import Cookies from 'js-cookie';
import getDate from '@/util/getDate.js';

export default {
    name: 'visiteVolume',
    data () {
        return {
            baseuser: JSON.parse(Cookies.get('baseUser'))
        };
    },
    mounted () {
        this.$nextTick(() => {
            let visiteVolume = echarts.init(document.getElementById('visite_volume_con'));
            var ball = 0;//球类
            var music = 0;//音乐类
            var art = 0;//美术类
            var go = 0;//围棋类
            var language = 0;//语言类
            var calligraphy = 0;//书法类
            var dance = 0;//舞蹈类
            var taekwondo = 0;//跆拳道
            var early = 0;//早教类
            var Chinese = 0;//国画类
            var literature = 0;//文学类
            var uranology = 0;//天文学
            util.ajax.post('/busine/bill/findStudentByMajor', util.toFormData({
                orgid: (this.baseuser.type === 2 ? this.baseuser.orgId : '')
            })).then(res => {
                let billList = res.data.data.list;
                billList.forEach((item) => {
                    let major = item.course.marjorId;
                    if (major == 101) {
                        ball++;
                    } else if (major == 102) {
                        music++;
                    } else if (major == 103) {
                        art++;
                    } else if (major == 104) {
                        go++;
                    } else if (major == 105) {
                        language++;
                    } else if (major == 106) {
                        calligraphy++;
                    } else if (major == 107) {
                        dance++;
                    } else if (major == 108) {
                        taekwondo++;
                    } else if (major == 109) {
                        early++;
                    } else if (major == 110) {
                        Chinese++;
                    } else if (major == 111) {
                        literature++;
                    } else if (major == 112) {
                        uranology++;
                    }
                });
                const option = {
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'right',
                        data: ['球类', '音乐类', '美术类', '围棋类', '语言类', '书法类', '舞蹈类', '跆拳道', '早教类', '国画类', '文学类', '天文学']
                    },
                    series: [
                        {
                            name: '学生报名专业',
                            type: 'pie',
                            radius: '66%',
                            center: ['40%', '60%'],
                            data: [
                                {value: ball, name: '球类', itemStyle: {normal: {color: '#9bd598'}}},
                                {value: music, name: '音乐类', itemStyle: {normal: {color: '#ffd58f'}}},
                                {value: art, name: '美术类', itemStyle: {normal: {color: '#abd5f2'}}},
                                {value: go, name: '围棋类', itemStyle: {normal: {color: '#ab8df2'}}},
                                {value: language, name: '语言类', itemStyle: {normal: {color: '#e14f60'}}},
                                {value: calligraphy, name: '书法类', itemStyle: {normal: {color: '#CFCFCF'}}},
                                {value: dance, name: '舞蹈类', itemStyle: {normal: {color: '#c0d574'}}},
                                {value: taekwondo, name: '跆拳道', itemStyle: {normal: {color: '#eaffd1'}}},
                                {value: early, name: '早教类', itemStyle: {normal: {color: '#a7e4f2'}}},
                                {value: Chinese, name: '国画类', itemStyle: {normal: {color: '#e7d2f2'}}},
                                {value: literature, name: '文学类', itemStyle: {normal: {color: '#e1cab7'}}},
                                {value: uranology, name: '天文学', itemStyle: {normal: {color: '#cf8164'}}}
                            ],
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };

                visiteVolume.setOption(option);

                window.addEventListener('resize', function () {
                    visiteVolume.resize();
                });
            });
        })
    }
}
</script>
